<template lang="html">
  <div class="articleList">
    <mu-expansion-panel>
      <div slot="header">添加文章</div>
      <mu-button color="primary" @click="toArticle()" full-width>添加文章</mu-button>
    </mu-expansion-panel>

    <mu-expansion-panel :expand="searchExpandOpen" @change="searchExpandClick">
      <div slot="header">搜索</div>
      <mu-select label="选择搜索条件" v-model="search.type" label-float full-width @change="searchExpandChange">
        <mu-option label="标题" value="title"></mu-option>
        <mu-option label="浏览量" value="views"></mu-option>
        <mu-option label="是否显示" value="is_show"></mu-option>
        <mu-option label="是否显示在主页" value="is_show_index"></mu-option>
      </mu-select>

      <mu-text-field v-if="search.type == 'title'" label="搜索内容" type="text" v-model="search.value" label-float full-width></mu-text-field>

      <mu-select v-else-if="search.type == 'is_show' || search.type == 'is_show_index'" v-model="search.value" label-float full-width>
        <mu-option label="显示" :value="1"></mu-option>
        <mu-option label="隐藏" :value="0"></mu-option>
      </mu-select>

      <mu-button color="primary" @click="getPage(1)">{{searchExpandButton}}</mu-button>
    </mu-expansion-panel>

    <mu-data-table stripe border :columns="columns" :loading="loading" :sort.sync="sort" @sort-change="handleSortChange" :data="listDatas">
      <template slot-scope="scope">
        <td>{{scope.row.id}}</td>
        <td>{{scope.row.title}}</td>
        <td><img style="width: 100%;" :src="scope.row.cover" alt="封面图"></td>
        <td>{{scope.row.views}}</td>
        <td @click="update('update', scope, 'number')">{{scope.row.number}}</td>
        <td @click="update('is_show', scope)">{{scope.row.is_show ? '显示中' : '隐藏中'}}</td>
        <td>{{scope.row.created_at}}</td>
        <td>
          <mu-button color="primary" @click="toArticle(scope.row.id)">编辑</mu-button>

          <mu-button v-if="scope.row.is_show" color="#607d8b" @click="update('is_show', scope)">点击隐藏</mu-button>
          <mu-button v-else color="#ff9800" @click="update('is_show', scope)">点击显示</mu-button>

          <mu-button color="success" @click="update('update', scope, 'number')">修改排序</mu-button>
          <mu-button color="error" @click="update('delete', scope)">删除</mu-button>
        </td>
      </template>
    </mu-data-table>

    <mu-flex justify-content="center">
      <mu-pagination v-show="!loading && pages.total" :total="pages.total" :current="pages.page" :page-size="pages.page_size" @change="getPage">
      </mu-pagination>
    </mu-flex>

  </div>
</template>

<script>
export default {
  data() {
    return {
      search: {},
      searchExpandOpen: false,
      searchExpandButton: '点击搜索',

      type: null,
      loading: true,
      listDatas: [],

      sort: {
        name: '',
        order: 'asc'
      },

      columns: [
        { title: 'id', name: 'id', sortable: true },
        { title: '标题', name: 'title' },
        { title: '封面图', name: 'cover', width: '300' },
        { title: '浏览量', name: 'views', sortable: true },
        { title: '显示顺序', name: 'number', sortable: true, tooltip: '越大越靠前', width: '120' },
        { title: '是否显示', name: 'is_show', sortable: true, width: '120' },
        { title: '发布日期', name: 'created_at', sortable: true, width: '180' },
        { title: '操作', name: 'action', width: '420' },
      ],

      pages: {},

      url: '/article/put'
    }
  },
  watch: {
    '$route': 'fetchData',
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      let type = this.$route.params.type
      this.loading = true
      this.listDatas = []
      this.type = type
      this.getPage(1)
    },
    getPage(page) {
      this.loading = true
      this.searchExpandButton = '正在搜索'
      this.$store.commit('title', 'Page: ' + page)
      flyio.get('/article/list', {
        type: this.type,
        page,
        search: this.search,
      }).then((res) => {
        this.pages = res.pages
        this.listDatas = res.datas
        this.loading = false
        this.searchExpandButton = '点击搜索'
      })

      this.loading = true
      flyio.get()
    },
    toArticle(id=null) {
      let type = this.type
      this.$parent.router('ArticleNew', {
        type,
        id,
      })
    },
    update(type='update', info, name=null) {
      let id = info.row.id,
          $index = info.$index

      if (type == 'delete') {
        this.$confirm('将删除 (' + info.row.title + ')', '确定要删除？').then(({result}) => {
          if (result) {
            this.$Toast('正在删除')
            Vue.delete(this.listDatas, $index)
            flyio.put(this.url, {
              id,
              name: 'delete',
            }).then((res) => {
              this.$Toast('删除完成')
            })
          }
        })
      } else if (type == 'is_show') {
        let value = !info.row.is_show
        this.listDatas[$index].is_show = value
        flyio.put(this.url, {
          id,
          name: 'is_show',
          value,
        }).then((res) => {
          this.$Toast('更新完成')
        })
      }  else {
        this.$prompt(name, '正在修改', {
          content: name == 'title' ? '标题' : '排序(越大越靠前)',
          inputType: name == 'title' ? 'text' : 'number',
          inputValue: info.row[name],
        }).then(({result, value}) => {
          if (result) {
            this.listDatas[$index][name] = value
            flyio.put(this.url, {
              id,
              name,
              value,
            }).then((res) => {
              this.$Toast('更新完成')
            })
          }
        })
      }
    },
    handleSortChange ({name, order}) {
      this.listDatas = this.listDatas.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
    },
    searchExpandClick(status) {
      this.searchExpandButton = '点击搜索'
      if (!status) {
        this.search = {}
        this.getPage(1)
      }
      this.searchExpandOpen = status
    },
    searchExpandChange(type) {
      switch (type) {
        case 'is_show':
        case 'is_show_index':
          this.search.value = 1
          break;

        default:
          this.search.value = null
      }
    }
  },
}
</script>

<style lang="css" scoped>
</style>
